<template>
  <div ref="dom"></div>
</template>
<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
  name: 'Pie',
  props: {
    value: null,
    name: null,
    seriesName: null,
    show: null,
    color: [],
    text: '',
    option: null
  },
  data () {
    return {
      dom: null,
      newOption: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    let data = this.value
    let text = this.text
    const option = {
      // color: this.color,
      title: {
        text: this.text,
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        top: '15%',
        left: '3%',
        formatter (name) {
          var res = ''
          var index = ''
          for (var i = 0; i < data.length; i++) {
            if (data[i].name === name) {
              res = data[i].value
              index = i + 1
            }
          }
          // return name + '  ' + res
          if (text !== '销售业绩最高排名/销售业绩最低排名') {
            return '{a|序号：' + index + '}' + '  ' + '{a|名称：' + name + '}' + '  ' + '{b|数量：' + res + '}'
          } else {
            return '{a|序号：' + index + '}' + '  ' + '{a|名称：' + name + '}' + '  ' + '{b|金额：' + res + '}'
          }
        },
        textStyle: {
          rich: {
            b: {
              fontSize: 15,
              align: 'left',
              padding: [0, 10, 0, 80],
              lineHeight: 25
            },
            a: {
              fontSize: 15,
              align: 'left',
              width: 80,
              padding: [0, 10, 0, 10],
              lineHeight: 25
            }
          }
        }
      },
      series: [
        {
          name: this.seriesName,
          type: 'pie',
          radius: '60%',
          center: ['70%', '40%'],
          data: this.value,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
